<template>
	<view class="phone-login">
		<view class="login-form">
			<view class="form-item">
				<view class="icon-box">
					<image src="/static/img/login/user-name.png" mode=""></image>
				</view>
				<u-input class="flex-1" v-model="form.phone" type="number" maxlength="11" placeholder="请输入手机号" :custom-style="{fontWeight:'bold',letterSpacing: '4rpx'}" placeholder-style="font-weight:initial;letterSpacing:0;"/>
			</view>
			<view class="form-item">
				<view class="icon-box">
					<image src="/static/img/login/sms.png" mode=""></image>
				</view>
				<u-input class="flex-1" v-model="form.code" type="number" maxlength="6" placeholder="请输入验证码" :custom-style="{fontWeight:'bold',letterSpacing: '4rpx'}" placeholder-style="font-weight:initial;letterSpacing:0;"/>
				<view class="get-code" :class="{disabled:codeText!='获取验证码' && codeText!='重新获取'}" @click="getCode()">{{codeText}}</view>
			</view>
			<view class="agreement-box" @click="agreement=!agreement">
				<static-image v-if="agreement" src="/static/img/common/agreement-active.png" width="32" height="32"></static-image>
				<static-image v-else src="/static/img/common/agreement-no.png" width="32" height="32"></static-image>
				<view class="mar-l-5">
					<text>我已阅读并同意</text>
					<text class="color-blue" @click.stop="$common.navigator('/pagesA/setting/userAgreement')">《用户服务协议》</text>
				</view>
			</view>
			<view class="login-btn">
				<u-button type="primary" shape="circle" @click="submitForm" :custom-style="{background:'linear-gradient( 270deg, #33A0FF 0%, #1F78FF 100%)',fontSize:'32rpx',fontWeight:'bold',height:'96rpx',letterSpacing: '8rpx'}">立即登录</u-button>
			</view>
		</view>
		<u-verification-code :seconds="60" ref="uCode" @change="codeChange" change-text="x秒" unique-key="login"></u-verification-code>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agreement:false,
				form: {
					phone: "",
					code: ""
				},
				codeText:'获取验证码'
			}
		},
		onLoad(e) {
			if(e.rannoranno){
				this.form.rannoranno = e.rannoranno
				this.submitForm()
			} else if(uni.getStorageSync('token')){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		},
		methods: {
			submitForm(){
				if(!this.form.rannoranno){
					if (!this.form.phone) {
						return this.$u.toast('请输入手机号');
					}
					if (!this.form.code) {
						return this.$u.toast('请输入验证码');
					}
					if (!this.agreement) {
						return this.$u.toast('请阅读并同意相关协议');
					}
				}
				uni.showLoading({ mask:true })
				this.form.channelId = uni.getStorageSync('channelId') || ''
				this.form.recommendUserId = uni.getStorageSync('recommendUserId') || ''
				this.$request({
					url: '/loginUserInfo/login',
					method: 'post',
					data:this.form,
					showLoading:true,
				}).then(res => {
					this.$refs.uCode.reset();
					uni.setStorageSync('token',res.data.token)
					this.$store.commit('SET_USERINFO',res.data)
					uni.removeStorageSync('recommendUserId')
					uni.removeStorageSync('channelId')
					uni.switchTab({
						url:'/pages/index/index'
					})
				})
			},
			getCode(){
				if(this.$refs.uCode.canGetCode) {
					if (!this.form.phone) {
						return this.$u.toast('请输入手机号');
					}
					uni.showLoading({ mask:true })
					this.$request({
						url: '/loginUserInfo/sendSmscode',
						method: 'get',
						data:{
							phone: this.form.phone,
						}
					}).then(res => {
						this.$refs.uCode.start();
					})
				}
			},
			codeChange(text){
				this.codeText = text;
			}
		}
	}
</script>
<style>
	page{
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.phone-login {
		background-image: url('~@/static/img/login/header-bg.png');
		background-size: 100% 480rpx;
		background-repeat: no-repeat;
		.login-form{
			padding: 440rpx 48rpx 0;
			.form-item{
				padding: 12rpx 24rpx;
				border-radius: 16rpx;
				margin-bottom: 48rpx;
				display: flex;
				align-items: center;
				background: #F7F8FA;
				.icon-box{
					padding-right: 24rpx;
					margin-right: 24rpx;
					position: relative;
					image{
						width: 48rpx;
						height: 48rpx;
					}
					&:after{
						content: '';
						width: 1rpx;
						height: 32rpx;
						background: #EBEBEB;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
				.get-code{
					color: #1F78FF;
					margin-left: 24rpx;
					&.disabled{
						color: #aaa;
					}
				}
			}
			.agreement-box{
				display: flex;
			}
			.login-btn{
				margin-top: 80rpx;
			}
		}
	}
</style>